<template>
       <div class="table-land-view">
            <vxe-table
              border
              :show-header="false"
              height="auto"
              :data="tableData">
              <vxe-column>
                <template #default="{row}">
                  <div style="display: flex;padding:10px; " 
                       :class="{'selected':row.farmLandId == dropFarmLandId}">
                        <div class="imgBox" >
                                 <div class="image-view">      
                                     <Image
                                         :list="[`${urlImage}/lngis/farm/common/static/${row.picSource}`]"
                                         :url="`${urlImage}/lngis/farm/common/static/${row.pic}`"  />
                                      </div>
                                    <div class="tips-icon">{{row.farmLandNo}}</div>
                            </div>
                            <div class="right-view" @click="setMapData(row)">
                              <div class="title">
                                    <span class="name" :title="row.farmLandName">{{row.farmLandName}}</span>
                                </div>
                                <div class="tag-view">
                                    <div class="tag-text">
                                      {{ row.tagsName ||'暂无标签'}} 
                                    </div>
                                    <div class="size">
                                        {{Number(row.mapAreaSize.toFixed(1))}}亩
                                    </div>
                                </div>
                                <div class="corpname">
                                      {{ row.cropName }},{{ row.cropSeriesName}}
                                    </div>
                                <vxe-button v-if="showDelete" type="text" 
                                @click="btnDel(row)" 
                                class="btn-delete" 
                                status="danger" 
                                icon="vxe-icon-delete"></vxe-button>
                            </div>
                  </div>
                         
                </template>
              </vxe-column>
            </vxe-table>
            <vxe-pager 
                v-model:current-page="pageInfo.page" 
                :layouts="['PrevPage','FullJump','PageCount','NextPage']"
                @page-change="pageChangeEvent"
                v-model:page-size="pageInfo.limit" 
                :total="pageInfo.total" />
          </div>
    </template>
    
    <script setup>
    import {ref} from "vue"
    import Image from '@/components/custom/image.vue'
    const urlImage = ref(import.meta.env.VITE_BASE_PATH)
    const emit = defineEmits(['page-change','onClick','onDelete'])
    const props = defineProps({
        tableData:{
            type:Array,
            default:[]
        },
        pageInfo:{
            type:Object,
            default:{}
        },
        showDelete:{
            type:Boolean,
            default:false
        }
    })
    const dropFarmLandId = ref('')
    const pageChangeEvent = ({currentPage, pageSize}) => {
        emit('page-change',{currentPage, pageSize})

    }
      // 表格行单击处理事件
    const setMapData= (row)=>{
        dropFarmLandId.value = row.farmLandId
        emit('onClick',row)
    }

      const btnDel= (row)=>{
        emit('onDelete',row)
    }
    
    </script>
    <style>
    .table-land-view .vxe-body--column{
           padding:0 !important;
        }
        .table-land-view .vxe-table--render-default .vxe-cell{
          padding:0;
        }
        .table-land-view .vxe-pager .vxe-pager--wrapper{
          margin:0 auto;
          flex-grow: 0;
        }
    </style>
    <style lang="scss" scoped>
          .table-land-view{
        height: calc(100vh - 300px);
        padding:0 10px;
        margin-top:-1px;
        .imgBox{
              position: relative;
              width: 92px;
              height: 78px;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: left top;
              border-radius: 3px;
              flex-shrink: 0;
              .image-view{
                width: 92px; 
                height: 78px;
              }
              .tips-icon{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 60px;
                  height: 30px;
                  background: url();
                  background-repeat: no-repeat;
                  background-position: inherit;
                  display: flex;
                  justify-content: left;
                  font-size: 12px;
                  padding:1px 2px;
                  color: #fff;
              }
          }
          .right-view{
            padding-left:10px;
            cursor: pointer;
          }
          .title{
              display: flex;
              font-size: 14px;
              overflow: hidden;
              width:150px;
              .name{
                  flex: 1;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  word-break: break-all;
                  font-weight: 500;
                  flex-shrink: 0;
                  width: 0;
                  font-size:15px;
                  color: #333;
                  font-weight: bold;
              }
              .iocnbtn{
                  display: flex;
                  align-items: center;
                  flex-shrink: 0;
              }
            }
              .tipsbox{
                  display: flex;
                  span{
                      background: #FFF5E5;
                      border-radius: 2px;
                      height: 26px;
                      padding: 0 8px;
                      font-size:14px;
                  }
              }
              .tag-view{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding-top:6px;
                  padding-right: 10px;
                  padding-bottom:6px;
                  .tag-text{
                      font-size: 12px;
                      background-color: #eee;
                      padding:2px 5px;
                  }
                  .size{
                          font-weight: 400;
                          color: #999999;
                          font-size:14px;
                      }
              }
              .corpname{
                color: #ff9c00;
                font-size:13px;
              }
              .btn-delete{
                position: absolute;
                right:5px;
                bottom:8px;
                z-index:99;
                font-size:15px;
              }
          .selected{
                background-color: #EBF9F4; 
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 4px;
                    height: 100%;
                    background-color: #04AE70;
                    z-index:9;
                }
            }
      }
    </style>